<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('字段详细设计')" />
    <th:block th:include="include :: select2-css" />
    <link th:href="@{/css/choose_data_map.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight add-question">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox-content">
                <input type="hidden" name="pageId" th:value="${pageId}">
                <form class="form-horizontal" id="pageTagForm" th:if="${type} == 0">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">设置图片主题：</label>
                        <div class="col-sm-8">
                            <input name="tagName" class="form-control">
                        </div>
                    </div>
                </form>
                <form class="form-horizontal" id="pageTagForm" th:if="${type} == 1">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">选择图片主题：</label>
                        <div class="col-sm-8">
                            <select id="pageTag" class="form-control select2-multiple" multiple>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<script th:inline="javascript">
    var type = [[${type}]];
    if(type==1){
        var pageImgId = [[${pageImgId}]];
        pageTagList();
        $('#pageTag').select2({
            placeholder: "选择图片主题",
            allowClear: true
        });
        queryPageTagByImgId(pageImgId);
    }

    function submitHandler() {
        if(type == 1){
            var params = {
                "fileId": pageImgId,
                "pageTagIds": $.form.selectSelects("pageTag").split(',')
            };
            var config = {
                url: ctx + "pageTag/pageTag/saveFilePageTagRef",
                type: "POST",
                dataType: "json",
                contentType: 'application/json',
                data: JSON.stringify(params),
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                    $.modal.disable();
                },
                success: function(result) {
                    $.modal.closeLoading();
                    if (result.code == web_status.SUCCESS) {
                        $.modal.alertSuccess(result.msg);
                        $.modal.close();
                        parent.pageImgList($("input[name='pageId']").val(), 0);
                        return false;
                    }
                    if (result.code == web_status.WARNING) {
                        $.modal.alertWarning(result.msg);
                        return false;
                    }
                    $.modal.alertError(result.msg);
                }
            };
            $.ajax(config);
        }else{
            if ($.validate.form()) {
                var params = {
                    "tagName": $("input[name='tagName']").val(),
                    "pageId": $("input[name='pageId']").val()
                };
                var config = {
                    url: ctx + "pageTag/pageTag/add",
                    type: "POST",
                    dataType: "json",
                    data: params,
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍后...");
                        $.modal.disable();
                    },
                    success: function(result) {
                        $.modal.closeLoading();
                        if (result.code == web_status.SUCCESS) {
                            $.modal.close();
                            // 父页面更新
                            parent.pageTagList();
                            return false;
                        }
                        if (result.code == web_status.WARNING) {
                            $.modal.alertWarning(result.msg);
                            return false;
                        }
                        $.modal.alertError(result.msg);
                    }
                };
                $.ajax(config);
            }
        }

    }
    function pageTagList() {
        var config = {
            url:  ctx + "pageTag/pageTag/list",
            type: "GET",
            dataType: "json",
            data: {pageId:$("input[name='pageId']").val()},
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    var data = {};
                    data.list = result.data || [];
                    var html = "";
                    data.list.forEach((e) => {
                        html += `<option value="${e.id}">${e.tagName}</option>`
                })
                    $("#pageTag").html(html);
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }
    function queryPageTagByImgId() {
        var config = {
            url: ctx + "pageTag/pageTag/queryPageTagByImgId",
            type: "GET",
            dataType: "json",
            data: {imgId: pageImgId},
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    var data = {};
                    data.list = result.data || [];
                    var vals = [];
                    data.list.forEach(e => {
                        vals.push(e.id)
                    })
                    $("#pageTag").val(vals).trigger("change");
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }
</script>
</body>
</html>